import { StyleSheet } from 'react-native';
import { autoSize } from "./common";
import { SCREEN_WIDTH } from "../../constant";
import Colors from "./Colors";
export const timeAreaStyles = StyleSheet.create({
    container: {
        width: SCREEN_WIDTH,
        height: autoSize(85),
        backgroundColor: Colors.White,
    },
    col: {
        width: SCREEN_WIDTH,
        backgroundColor: Colors.White,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    actionBar: {
        width: SCREEN_WIDTH,
        backgroundColor: Colors.White,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    actionsContainer: {
        paddingHorizontal: 10,
        alignItems: 'center'
    },
    actionsTextContainer: {
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    actionButton: {
        width: SCREEN_WIDTH,
        height: autoSize(52),
        backgroundColor: Colors.Active,
    },
    symbol: {},
    timeAxis: {
        height: autoSize(85),
        backgroundColor: Colors.Background,
        position: 'relative'
    },
    pickerArea: {
        bottom: 0,
        left: 0,
        width: SCREEN_WIDTH / 8,
        height: autoSize(60),
        backgroundColor: Colors.Active,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderLeftColor: Colors.DarkGray,
        borderRightColor: Colors.DarkGray,
        opacity: 0.7
    },
    dragFlagContainer: {
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    dragFlagLeft: {
        width: 20,
        height: 20,
        backgroundColor: Colors.White,
        borderWidth: 1,
        borderColor: Colors.DarkGray,
        borderRadius: 10,
        marginLeft: -10
    },
    dragFlagRight: {
        width: 20,
        height: 20,
        backgroundColor: Colors.White,
        borderWidth: 1,
        borderColor: Colors.DarkGray,
        borderRadius: 10,
        marginRight: -10
    },
    selectTimeBtnContainer: {
        display: 'flex',
        flexDirection: 'row',
        width: SCREEN_WIDTH,
        height: autoSize(50),
        borderTopColor: Colors.Separate,
        borderBottomColor: Colors.Separate,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        backgroundColor: Colors.White
    },
    selectTimeBtn: {
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    selectTimeSeparate: {
        width: 1,
        backgroundColor: Colors.Separate,
        height: '100%'
    },
    loadingRoomInfo: {
        position: 'absolute',
        left: 0,
        top: 0,
        display: 'flex',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.3)',
        width: SCREEN_WIDTH,
        height: autoSize(85),
    }
});
